<template>
  <div class="echart-part">
    <echart-title :title="para.title" :imgWidth="titleImgWidth"></echart-title>
    <div style="flex-grow: 1;display: flex;flex-direction: column">
      <div class="echart_content" ref="barDiv_1"  style="flex-basis: 38%">

      </div>
      <div style="flex-basis: 5%"></div>
      <div class="echart_content" ref="barDiv_2" style="flex:57%;flex-grow: 1">

      </div>
    </div>
  </div>
</template>

<script>
  import echartTitle from "../common/echart-title";
  import {barOption_1,barOption_2} from "./echarts-option";
  import {data} from "./data";

  const echarts = require('echarts')
  let myChart_bar_1
  let myChart_bar_2


  export default {
    name: 'state-data',
    props: {
      para: {}
    },
    components:{
      echartTitle
    },
    data () {
      return {
        timer: '',
        data: [],
        des: [],
        titleImgWidth:'3%',
        barOption_1: barOption_1,
        barOption_2: barOption_2
      }
    },
    mounted () {
      this.getData()
    },
    watch: {
    },
    beforeDestroy () {
      if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer) //关闭
      }
    },

    methods: {
      getData () {
        let me=this
        me.barOption_1.yAxis.data=['test1','test2']
        me.barOption_2.yAxis.data=['test3','test4','test5']
        me.barOption_1.series[0].data =[1,2];
        me.barOption_2.series[0].data =[3,4,5] ;
        this.draw()
      },

      draw () {
        let barDiv_1 = this.$refs.barDiv_1
        let barDiv_2 = this.$refs.barDiv_2
        if (!myChart_bar_1 || !barDiv_1.innerHTML) {
          myChart_bar_1 = echarts.init(barDiv_1);
        }
        if (!myChart_bar_2 || !barDiv_2.innerHTML) {
          myChart_bar_2 = echarts.init(barDiv_2);

        }
        myChart_bar_1.setOption(this.barOption_1);
        myChart_bar_2.setOption(this.barOption_2);
        window.addEventListener("resize", () => myChart_bar_1.resize(), false);
        window.addEventListener("resize", () => myChart_bar_2.resize(), false);
      },
    }
  }
</script>

<style scoped>

</style>

